<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>智慧农业首页</title>
		<link rel="stylesheet" href="./layui/css/layui.css">
		<link rel="stylesheet" href="./css/index.css">
		<link rel="stylesheet" href="./css/fan.css">
		<style>
			.sun-btn {
				width: 50%;
				height: 50%;
				/*background-color: #92B8B1;*/
				float: left;
				border: black 1px solid;

			}
			.sun-btn h2 {
				width: 100%;
				height: 45px;
				color: black;
				line-height: 45px;
				font-size: 20px;
				text-align: center;
				border: black 1px solid;

			}
			.fan-btn {
				width: 50%;
				height: 50%;
				/*background-color: #8D8D8D;*/
				float: right;
				border: black 1px solid;

			}
			.fan-btn h2 {
				width: 100%;
				height: 45px;
				color: black;
				line-height: 45px;
				font-size: 20px;
				text-align: center;
				border: black 1px solid;
			}
			.water {
				width: 100%;
				height: 50%;
				clear: both;
				border: black 1px solid;
			}
			.water h2 {
				width: 100%;
				height: 45px;
				color: black;
				line-height: 45px;
				font-size: 20px;
				text-align: center;
				border: black 1px solid;
			}
			.water .rain {
				background-color: #8D8D8D;
				background: url("./img/rain.jpg") no-repeat;
				background-position: left;
			}
			#canvas {
				width: 100%;
				height: 170px;
			}
			/*下雨按钮*/
			.btn2 {
				display: block;
				float: left;
				transform: translate(-50%, -50%);
				appearance: none;
				outline: none;
			}
			.btn2::before {
				content: "";
				position: absolute;
				width: 100px;
				height:40px;
				background: gray;
				border-radius: 20px;
				box-sizing: 0 3px #000;
			}
			.btn2::after {
				content: "";
				position: absolute;
				top: 2px;
				left: 62px;
				width: 36px;
				height: 36px;
				border-radius: 50%;
				box-sizing: 0 3px gray;
				background: white;
				transition: all 0.3s ease-in-out;
			}
			/* 当btn 被点击触发 */
			.btn2:checked::before {
				background: #00CED1;
			}
			/* 当btn 被点击触发 */

			.btn2:checked::after {
				left: 2px;
			}


		</style>
	</head>
	<body>
	<!-- 时间__头部 -->
	<header>
		<h1>小郑智慧农业系统</h1>
		<div class="time"></div>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item layui-hide layui-show-md-inline-block">
				<a href="javascript:;">
					<img  src="./img/logo.png" class="layui-nav-img">
					<span  id="user-name">用户名</span>
				</a>
				<dl class="layui-nav-child">
					<dd><a onclick="x_admin_show('切换帐号','http://www.baidu.com')">个人信息</a></dd>
					<dd><a onclick="x_admin_show('切换帐号','http://www.baidu.com')">切换账户</a></dd>
					<dd><a href="./login.html">退出</a></dd>
				</dl>
			</li>
		</ul>
	</header>

	<!-- 主题内容 -->
	<div class="mainbox">
		<div class="column">
			<!-- 实时温度 -->
			<div class="panel bar">
				<h2>实时空气温度</h2>
				<div class="chart">
					<iframe id="iframeMain1" src="./realData/realTemp.html" style="width: 100%"; height="100%"; ></iframe>
				</div>
				<div class="panel_footer"></div>
			</div>
			<!-- 实时光照强度 -->
			<div class="panel line">
				<h2>实时光照强度</h2>
				<div class="chart">
					<iframe id="iframeMain3" src="./realData/realIlluminance.html" style="width: 100%"; height="100%"; ></iframe>
				</div>
				<div class="panel_footer"></div>
			</div>

			<!-- 饼图 -->
			<div class="panel pie">
				<h2>农业大棚遮光帘</h2>
				<div class="chart">
					<img id="img" src="./img/g1.png" height="300" width="550"/>
				</div>
				<div class="panel_footer"></div>
			</div>
		</div>
		<div class="column">
			<!-- 顶部数字 -->
			<div class="no">
				<div class="layui-carousel" id="test1">
					<div carousel-item>
						<div class="bg1 demo-carousel"></div>
						<div class="bg2 demo-carousel"></div>
						<div class="bg3 demo-carousel"></div>
						<div class="bg4 demo-carousel"></div>
						<div class="bg5 demo-carousel"></div>
					</div>
				</div>
			</div>
			<div class="map">
				<div class="map1"></div>
				<div class="map2"></div>
				<div class="map3"></div>
				<div class="chart"></div>
			</div>
			<div class="control">
				<h2>系统控制台</h2>
				<div class="control-main">
					<!--遮阳帘开关-->
					<div class="sun-btn" >
						<h2>大棚遮阳帘开关</h2>
						<input type="checkbox" name="" class="btn" id="btn1">
					</div>
					<!--风扇开关-->
					<div class="fan-btn">
						<h2>大棚排气风扇开关</h2>
					</div>
					<!--浇水开关-->
					<div class="water">
						<h2>大棚浇水系统开关 <input type="checkbox" name="" class="btn2" id="btn2"></h2>

						<div class="rain" id="rain">
							<canvas id="canvas" ></canvas>
						</div>
					</div>


				</div>
			</div>
		</div>
		<div class="column">
			<!-- 柱形图 -->
			<div class="panel barTwo">
				<h2>实时空气湿度</h2>
				<div class="chart">
					<iframe id="iframeMai2" src="./realData/realHumidity.html" style="width: 100%"; height="100%"; ></iframe>
				</div>
				<div class="panel_footer"></div>
			</div>
			<!-- 折线图 -->
			<div class="panel lineTwo">
				<h2>实时土壤湿度</h2>
				<div class="chart">
					<iframe id="iframeMain4" src="./realData/realTour.html" style="width: 100%"; height="100%"; ></iframe>
				</div>
				<div class="panel_footer"></div>
			</div>
			<!-- 饼图 -->
			<div class="panel pieTwo">
				<h2>大棚排气风扇</h2>
				<div class="chart">
					<div id="fan">
							<input type="radio" name="switch" checked="" class="switch_0">
							<div class="switch_btn_0">关</div>
							<input type="radio" name="switch" class="switch_1">
							<div class="switch_btn_1">1</div>
							<input type="radio" name="switch" class="switch_2">
							<div class="switch_btn_2">2</div>
							<input type="radio" name="switch" class="switch_3">
							<div class="switch_btn_3">3</div>
						<div class="mask">
							<div class="logo">排气扇</div>
							<div class="line_1"></div>
							<div class="line_2"></div>
							<div class="line_3"></div>
							<div class="line_4"> </div>
							<div class="line_5"></div>
							<div class="line_6"></div>
							<div class="leaves">
								<div class="leaf_1"></div>
								<div class="leaf_2"></div>
								<div class="leaf_3"></div>
							</div>
						</div>
						<div class="header"></div>
					</div>
				</div>
				<div class="panel_footer"></div>
			</div>
		</div>
	</div>
	<div class="footer">
		<p>by:2018324418-郑华总</p>
	</div>
	</body>
	<script src="./layui/layui.js"></script>
	<script src="./js/jquery.js"></script>
	<script type="text/javascript"></script>
	<script>

		/*获取从login页面传过来的用户名*/
		getQueryVariable();
		function getQueryVariable(variable)
		{
			var query = window.location.search.substring(1);
			var vars = query.split("=");
			/*alert(vars[1]);*/
			var content=document.getElementById("user-name");
			content.innerText=vars[1];
			return(false);
		};

		/*layui的方法*/
		layui.use(['element', 'layer', 'util'], function() {
			var element = layui.element
					, layer = layui.layer
					, util = layui.util
					, $ = layui.$
					,carousel = layui.carousel; //轮播
			//弹出框
			layer.open({
				type: 1
				, offset: 'auto' //垂直水平居中
				//,id: 'layerDemo'+type //防止重复弹出
				, content: '<div style="padding: 20px 100px;">' + '因为没有设置弹性布局，在低分辨率电脑中控件会挤到一块，请放大或缩小画面大小达到最佳观看效果'  + '</div>'
				, btn: '关闭全部'
				, btnAlign: 'c' //按钮居中
				, shade: 0 //不显示遮罩
				, yes: function () {
					layer.closeAll();
				}
			});


			//执行一个轮播实例
			carousel.render({
				elem: '#test1'
				,width: '100%' //设置容器宽度
				,height: 400
				,arrow: 'none' //不显示箭头
				,anim: 'fade' //切换动画方式
			});
		});

		/*遮阳帘开关*/
		// 获取元素  开关点击事件
		var light = document.querySelector(".btn")
		var flag = 0;
		// 添加点击事件
		light.onclick = function () {
			if (flag == 0) {
				// 获取body 并且改变 背景颜色
				picStart(pic);
				// 重新赋值 flag
				flag = 1;

			} else {
				picStart(pic);
				flag = 0;
			}
			//数组倒序
			pic = pic.reverse();
		}

		/*开始浇水函数*/
		// 获取元素  开关点击事件
		var rain_btn = document.getElementById("btn2");
		var flag1 = 0;
		var timer=null;
		// 添加点击事件
		rain_btn.onclick = function () {
			if (flag1 == 0) {
				rain();
				// 重新赋值 flag
				flag1 = 1;
			} else {
				flag1 = 0;
			}
		}

		var pic = ["img/g1.png", "img/g2.png", "img/g3.png", "img/g4.png", "img/g5.png", "img/g6.png", "img/g7.png"
			, "img/g8.png", "img/g9.png", "img/g10.png", "img/g11.png", "img/g12.png", "img/g13.png"];
		pic = pic.reverse();  //第一次数组倒序，因为下面需要，所以就懒得换数组了
		/*遮阳帘开关函数*/
		function picStart(pic) {
			var i = 0;
			var time = null;
			time = setInterval(function () {
				if (i != pic.length) {
					$("#img")[0].src = pic[i];
				} else {
					clearInterval(time);
					i = 0;
				}
				i++;

			}, 100);
		}

		/*大棚浇水系统*/
		function rain(){
			$(document).ready(function() {
				var canvas = $('#canvas')[0];
				/*			canvas.width = document.getInstanceById("rain").innerWidth;
                            canvas.height = document.getInstanceById("rain").innerHeight;*/
				if (canvas.getContext) {
					var ctx = canvas.getContext('2d');
					var w = canvas.width;
					var h = canvas.height;
					ctx.strokeStyle = 'rgba(174,194,224,0.8)';
					ctx.lineWidth = 1;
					ctx.lineCap = 'round';
					var init = [];
					var maxParts = 1000;
					for (var a = 0; a < maxParts; a++) {
						init.push({
							x: Math.random() * w,
							y: Math.random() * h,
							l: Math.random() * 1,
							xs: -4 + Math.random() * 4 + 2,
							ys: Math.random() * 10 + 10
						})
					}
					var particles = [];
					for (var b = 0; b < maxParts; b++) {
						particles[b] = init[b];
					}

					function draw() {
						ctx.clearRect(0, 0, w, h);
						for (var c = 0; c < particles.length; c++) {
							var p = particles[c];
							ctx.beginPath();
							ctx.moveTo(p.x, p.y);
							ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
							ctx.stroke();
						}
						move();
						if(flag1==0){
							clearInterval(timer);
							ctx.clearRect(0, 0, w, h);
						}
					}
					function move() {
						for (var b = 0; b < particles.length; b++) {
							var p = particles[b];
							p.x += p.xs;
							p.y += p.ys;
							if (p.x > w || p.y > h) {
								p.x = Math.random() * w;
								p.y = -20;
							}
						}
					}
					timer=setInterval(draw, 30);
				}
			});
		}
	</script>
</html>
